<template>
    <div class="page1">
        <header class="page1-head"></header>
        <div class="page1-main">
            <div class="page1-menus">
                <div class="page1-menus-list">
                    <ul v-for="(v,k) in optionList"
                        v-bind:key="k"
                        v-bind:class="{'active': checkedSelectIndex == k}"
                        class="page1-option">
                        <div
                            v-text="v.name"
                            v-on:click="checkedSelect(k)"
                            class="page1-option-til"></div>
                        <router-link
                            v-for="(vv,kk) in v.child"
                            v-bind:key="routerKey(k,kk)"
                            v-text="vv.name"
                            v-on:click.native="checkedOption(vv,routerKey(k,kk))"
                            v-bind:to="vv.router"
                            v-bind:class="{'active': chekcedOptionIndex == routerKey(k,kk)}"
                            tag="li"
                            class="page1-option-item"
                            ></router-link>
                    </ul>
                </div>
                <div class="page1-about">
                    <p class="page1-about-til">练习---router</p>
                    <p class="page1-about-list">
                        <span class="page1-about-item">帮助</span>
                        <span class="page1-about-item">关于</span>
                    </p>
                </div>
            </div>
            <router-view class="page1-content"></router-view>
        </div>
    </div>
</template>

<script>
export default {
    name: 'page1',
    data () {
        return {
            optionList: [],
            optionList1: [],
            checkedData: {},
            checkedSelectIndex: null,
            chekcedOptionIndex: null
        }
    },
    methods: {
        routerKey (first, second) {
            return first + '_' + second
        },
        checkedSelect (index) {
            if (this.checkedSelectIndex === index) {
                this.checkedSelectIndex = null
            } else {
                this.checkedSelectIndex = index
            }
        },
        checkedOption (item, index) {
            if (this.checkedData === item) {
                this.checkedData = {}
                this.chekcedOptionIndex = null
            } else {
                this.checkedData = item
                this.chekcedOptionIndex = index
            }
        },
        getOptions () {
            this.optionList = [
                {
                    name: 'ES5',
                    router: '',
                    child: [
                        {
                            name: 'ES5_Array',
                            router: '/page1/page3',
                            child: []
                        }
                    ]
                }
            ]
        }
    },
    created () {
        this.getOptions()
    },
    beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
        console.log(to)
        next()
    },
    beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
        // console.log(to, from)
        next()
    },
    beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
        // console.log('page3')
        next()
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../css/config.less';
.page1{
    display: box;              /* OLD - Android 4.4- */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome 需要注意顺序*/
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    flex-direction: column;
}

.page1-head{
    box-sizing: border-box;
    position: relative;
    width:100%;
    height: 70px;
    background-color: @n1;
    border-bottom:1px solid #2b2b2b;
}

.page1-main{
    position: relative;

    display: box;              /* OLD - Android 4.4- */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome 需要注意顺序*/
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    flex:1 1;

    width:100%;
    background-color: #ffffff;
}

.page1-menus{
    position: relative;

    display: box;              /* OLD - Android 4.4- */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome 需要注意顺序*/
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    flex-direction: column;

    width: 180px;
    height: 100%;
    background: @n1;
    overflow-x: hidden;
    overflow-y: auto;
}

.page1-menus-list{
    flex:1 1 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

.page1-menus-list::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}

.page1-menus-list::-webkit-scrollbar-thumb{
    min-height: 28px;
    padding-top: 100px;
    background-color: rgba(255,255,255,0.5);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 5px;
}

.page1-about{
    flex:0 0 150px;
    box-sizing: border-box;
    width: 100%;
    padding:10px;
    background-color: #181d20;
    color:#ffffff;
}

.page1-about-til{
    padding:10px 0;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
}

.page1-about-list{
    padding:10px 0 10px 10px;
    font-size: 12px;
    line-height: 20px;
}

.page1-about-item{
    margin-right: 5px;
}

.page1-option{
    width: 100%;
    height: 50px;
    // background-color: @c3;
    color:#ffffff;
    font-size:14px;
    line-height: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.5s;
}

.page1-option.active{
    height:auto;
}

.page1-option-til{
    width: 100%;
    height: 50px;
    text-indent: 20px;
}

.page1-option-til:hover{
    color: #d84c31;
    background: rgba(255, 255, 255, .05);
}

.page1-option-item{
    width: 100%;
    height: 50px;
    background-color: rgba(0,0,0,0.2);
    text-indent: 40px;
}

.page1-option-item.active{
    color: #d84c31;
    background: rgba(255, 255, 255, .05);
}

.page1-option-item:hover{
    color: #d84c31;
    background: rgba(255, 255, 255, .05);
}

.page1-content{
    position: relative;
    flex:1 1 auto;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
</style>
